<template>
  <transition name="dialog-fade">
    <el-dialog
      v-if="addseathDialog"
      :title="dialogTitle"
      class="dialog-seach"
      :visible.sync="addseathDialog"
      width="800px"
      append-to-body
      @close="closeDialog(0)"
    >
      <el-form
        ref="formInfo"
        :model="formInfo"
        class="demo-form-inline"
        label-width="100px"
      >
        <el-form-item label="座位数量：" prop="seatnum" label-width="200px">
          <el-input v-model="formInfo.seatnum" placeholder="请输入座位数量" />
        </el-form-item>
        <el-form-item label="座位类型：" prop="seattype" label-width="200px">
           <el-select v-model="formInfo.seattype" clearable placeholder="请选择座位类别">
            <el-option
              v-for="item in seattypedata"
              :key="item.id"
              :label="item.text"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="closeDialog(0)">取消</el-button>
          <el-button type="primary" @click="submitForm('formInfo')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </transition>
</template>

<script>
// import { Add, Updata } from '@/api/user'
// import { getuserid } from '../../utils/auth'
export default {
  name: "DialogAddseat",
  props: {
    // msg: {
    //   type: String,
    //   default: ''
    // },
    dialogTitle: {
      type: String,
      default: ""
    },
    itemInfo: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      rules: {
        seatnum: [
          { required: true, message: "请输入座位数量", trigger: "change" }
        ],
        seattype: [
          { required: true, message: "请输入座位类别", trigger: "change" }
        ]
      },
      addseathDialog: false,
      formInfo: {
        seatnum:"",
        seattype:""
      },
      seattypedata:[
          {
              id:1,
              text:"智能座"
          },
          {
              id:2,
              text:"普通座位"
          }
      ],
      //   formInfo: JSON.parse(JSON.stringify(this.itemInfo))
    };
  },
  mounted() {
    // this.getOpt()
  },
  methods: {
    //   获取下拉框
    // getOpt() {
    //   this.getRequest('/asset/getTypeList', {}).then(res => {
    //     this.options = res.obj
    //   })
    // },
    // 保存操作
    submitForm(formName) {
      const that = this;
      //   const params = Object.assign(that.formInfo, {});
      that.$refs[formName].validate(valid => {
        if (valid) {
          //   if (that.msg === 1) {
          //     Updata({
          //       'name': that.formInfo.name,
          //       'code': String(that.formInfo.code),
          //       'userId': Number(getuserid()),
          //       'status': that.formInfo.status,
          //       'id': that.formInfo.id
          //     }).then(res => {
          //       that.$message({
          //         message: '操作成功！',
          //         type: 'success'
          //       })
          //     })
          //   } else {
          //   }
          that.closeDialog(1);
          // 走保存请求
        } else {
          return false;
        }
      });
    },
    // 关闭弹框
    closeDialog(flag) {
      this.$refs["formInfo"].resetFields();
      this.addseathDialog = false;
      this.$emit("closeDialog", flag);
    }
  }
};
</script>

<style scoped lang="scss">
.dialog-fade-enter-active {
  -webkit-animation: dialog-fade-in 0.3s;
  animation: dialog-fade-in 0.3s;
}
.dialog-fade-leave-active {
  -webkit-animation: dialog-fade-out 0.3s;
  animation: dialog-fade-out 0.3s;
}
@-webkit-keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
@keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
</style>
